<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: orange;
        }
    </style>
</head>
<body>
    <div>
        <button>点击</button>
    </div>
    
    <script>
    var btn = document.getElementsByTagName('button')[0];
    var div = document.getElementsByTagName('div')[0];
    function a(){alert("您点击了btn")}
    function b(){alert("您点击了div")}

    //DOM 0级事件
    // btn.onclick = a;
    // div.onclick = b;

    // DOM2级事件写法
    btn.addEventListener("click",a,true);
    div.addEventListener("click",b,true);//冒泡为false  捕获为true
    
    // btn.addEventListener("click",function(){alert(1)},false); //普通
    // btn.attachEvent("onclick",function(){alert(1)}) //IE8 及以下
    
    </script>
</body>
</html>